<template>
  <div class="banner">
    <el-col :span="24" class="action-bar">
      <!-- <span style="color:#888888;">轮播图管理:</span> -->
      <el-select style="margin-left: 10px" @clear="merchantSelectClear" @change="merchantChange" clearable v-model="merchantId" placeholder="所属门店">
        <el-option v-for="item in merchantList" :key="item.id" :value="item.id" :label="item.name" />
      </el-select>
      <el-button type="primary" size="medium" @click="addBtnReset" style="margin: 0 20px;">新增</el-button>
    </el-col>

    <!--列表-->
    <el-table :data="bannerList" v-loading="tableLoadingShow" element-loading-text="加载中"
              :header-cell-style="{'text-align':'center'}"
              :cell-style="{'text-align':'center'}"
              style="width: 100%"
              highlight-current-row class="el-table-style">
      <el-table-column prop="id" label="序号">
      </el-table-column>
      <el-table-column label="图片">
        <template slot-scope="scope">
          <el-image :src="scope.row.img_url" style="object-fit:contain" width="250" height="150"/>
        </template>
      </el-table-column>
      <el-table-column prop="title" width="200" style="text-align: center" label="标题" min-width="100"></el-table-column>
      <el-table-column prop="merchant_name" width="200" style="text-align: center" label="所属门店" min-width="100" sortable></el-table-column>
      <el-table-column prop="link_url" label="链接" min-width="100">
        <template slot-scope="scope">
          <div>
            <el-button type="primary"
                       v-clipboard:copy="scope.row.link_url"
                       v-clipboard:success="onCopy"
                       size="mini"
                       v-clipboard:error="onError">复制链接</el-button>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="sort" label="排序" min-width="100" sortable>
      </el-table-column>
      <el-table-column label="操作" min-width="150">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="getBannerDetail(scope.row.id)">编辑</el-button>
          <el-button type="danger" class="danger-btn" size="mini" @click="delBanner(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-col :span="24" class="footer-bar">
      <!-- <div class="batch"><el-button size="medium ">批量删除</el-button></div> -->
      <div class="page-code">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="pageTotal"
          :page-size="limit"
          :current-page="page"
          @current-change="reqBannerList"
        >
        </el-pagination>
      </div>
    </el-col>

    <!-- 新增 -->
    <el-dialog title="新增轮播图" :visible.sync="addFormVisible" width="40%">
      <el-form label-width="100px">
        <el-form-item label="标题">
          <el-select v-model="addForm.merchant_id" placeholder="选择门店">
            <el-option v-for="opt in merchantList" :key="opt.id" :value="opt.id" :label="opt.name" />
          </el-select>
        </el-form-item>
        <el-form-item label="图片">
          <el-upload
            class="avatar-uploader"
            name="photo"
            :action="$api.UPLOAD_IMG"
            :show-file-list="false"
            :on-success="addUploadSuccess"
          >
            <img v-if="addForm.imgUrl" :src="addForm.imgUrl" class="avatar">
            <!--<i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
            <div v-else style="display: flex;align-items: center;flex-direction: column;font-size: 11px;color: grey;line-height: 15px;padding-bottom: 10px" >
              <i class="el-icon-plus avatar-uploader-icon"></i>
              <span>建议宽高比例为5:2</span>
              <span>文件大小<2Mb</span>
            </div>
          </el-upload>
        </el-form-item>
        <el-form-item label="标题">
          <el-input v-model="addForm.title" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="链接">
          <el-input v-model="addForm.linkUrl" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="排序">
          <el-input type="number" v-model="addForm.sort" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="addCancelBtn">取消</el-button>
        <el-button type="primary" @click="addSubmitBtn">提交</el-button>
      </div>
    </el-dialog>
    <!-- 编辑 -->
    <el-dialog title="编辑轮播图" :visible.sync="editFormVisible" width="40%">
      <el-form label-width="100px">
        <el-form-item label="商店">
          <el-select v-model="editForm.merchant_id" placeholder="选择门店">
            <el-option v-for="opt in merchantList" :key="opt.id" :value="opt.id" :label="opt.name" />
          </el-select>
        </el-form-item>
        <el-form-item label="图片">
          <el-upload
            class="avatar-uploader"
            name="photo"
            :action="$api.UPLOAD_IMG"
            :show-file-list="false"
            :on-success="editUploadSuccess"
          >
            <img v-if="editForm.imgUrl" :src="editForm.imgUrl" class="avatar">
            <div v-else style="display: flex;align-items: center;flex-direction: column;font-size: 11px;color: grey;line-height: 15px;padding-bottom: 10px" >
              <i class="el-icon-plus avatar-uploader-icon"></i>
              <span>建议宽高比例为5:2</span>
              <span>文件大小<2Mb</span>
            </div>
          </el-upload>
        </el-form-item>
        <el-form-item label="标题">
          <el-input v-model="editForm.title" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="链接">
          <el-input v-model="editForm.linkUrl" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="排序">
          <el-input type="number" v-model="editForm.sort" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="editCancelBtn">取消</el-button>
        <el-button type="primary" @click="editSubmitBtn">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data(){
      return{
        tableLoadingShow: false,
        addFormVisible: false,//新增界面是否显示
        editFormVisible: false,//编辑界面是否显示
        addImageUrl:'',
        pageTotal:0,
        page: 1,
        limit:6,
        merchantId: '',
        //新增界面数据
        addForm: {
          merchant_id: '',
          title: '',
          imgId:'',
          linkUrl:'',
          imgUrl:'',
          sort: '',
        },
        //编辑界面数据
        editForm: {
          id:'',
          merchant_id: '',
          title: '',
          imgId:'',
          linkUrl:'',
          imgUrl:'',
          sort: '',
        },
        bannerList:[],
        merchant: '',
        merchantList: [],
      }
    },
    mounted(){
      this.getUserInfo();
      this.getMerchantScreenList()
    },
    methods:{
      onCopy(e){
        this.$message({
          type:'success',
          message:'复制成功'
        })
      },
      onError(erro){
        this.$message({
          type:'error',
          message:'复制失败'
        })
      },
      //新增上传图片成功回调
      addUploadSuccess(res, file) {
        if(res.data){
          this.addForm.imgUrl = res.data.img_url;
          this.addForm.imgId = res.data.id;
        }
      },
      //编辑上传图片成功回调
      editUploadSuccess(res, file) {
        if(res.data){
          this.editForm.imgUrl = res.data.img_url;
          this.editForm.imgId = res.data.id;
        }
      },
      //新增取消按钮
      addCancelBtn(){
        this.addForm.img = "";
        this.addForm.sort = "";
        this.addFormVisible = false;
      },
      //编辑取消按钮
      editCancelBtn(){
        this.editForm.id = "";
        this.editForm.title = "";
        this.editForm.img = "";
        this.editForm.sort = "";
        this.editFormVisible = false;
        this.editForm.imgUrl = '';
        this.editForm.merchant_id = "";
      },
      //新增按钮重置表单
      addBtnReset(){
        this.addForm.merchant_id = "";
        this.addForm.title = "";
        this.addForm.img = "";
        this.addForm.sort = "";
        this.addForm.imgUrl = "";
        this.addForm.linkUrl = "";
        this.addFormVisible = true;
      },
      //获取轮播图列表
      async reqBannerList(page){
        this.tableLoadingShow = true
        this.page = page || this.page
        let params = {
          limit:this.limit,
          page:this.page,
          merchant_id: this.merchantId
        }
        const res = await this.$api.getBannerList(params);
        if(res.data.level=='success'){
          let list = res.data.data;
          this.bannerList = list;
          this.pageTotal = res.data.page_info.total
        }else{
          this.$message({
            message: res.data.message,
            type: 'error'
          });
        }
        this.tableLoadingShow = false
      },


      //获取门店列表
      async getMerchantScreenList(){
        this.page = this.page
        let params = {
          limit:999,
          page:1
        }
        const res = await this.$api.getMerchantScreenList(params);
        if(res.data.level=='success'){
          let list = res.data.data;
          this.merchantList = list;
        }
      },

      //编辑获取轮播图信息
      async getBannerDetail(id){
        const params = {
          id: id
        }
        const res = await this.$api.getBannerDetail(params);
        if(res.data.level=='success'){
          this.editForm.id = res.data.data.id;
          this.editForm.merchant_id = parseInt(res.data.data.merchant_id);
          this.editForm.title = res.data.data.title;
          this.editForm.imgUrl = res.data.data.img_url;
          this.editForm.linkUrl = res.data.data.link_url;
          this.editForm.imgId = res.data.data.img_id;
          this.editForm.sort = res.data.data.sort;
          this.editFormVisible = true;
        }else {
            this.$message.error(res.data.message)
          }
      },
      //编辑提交按钮
      async editSubmitBtn(){
        const params = {
          id:this.editForm.id,
          title:  this.editForm.title,
          img_id:this.editForm.imgId,
          link_url:this.editForm.linkUrl,
          sort:this.editForm.sort,
          merchant_id: this.editForm.merchant_id
        }
        const res = await this.$api.setBanner(params);
        if(res.data.level=='success'){
          this.$message({
            message: '修改成功',
            type: 'success'
          });
          this.editCancelBtn();
          this.reqBannerList();
          this.editForm.imgUrl = '';
        }else{
          this.$message({
            message: res.data.message,
            type: 'warning'
          });
        }
      },
      //新增提交按钮
      async addSubmitBtn(){
        const params = {
          title:  this.addForm.title,
          img_id:this.addForm.imgId,
          link_url:this.addForm.linkUrl,
          sort:this.addForm.sort,
          merchant_id: this.addForm.merchant_id
        }
        const res = await this.$api.setBanner(params);
        if(res.data.level=='success'){
          this.$message({
            message: '修改成功',
            type: 'success'
          });
          this.addCancelBtn();
          this.reqBannerList();
        }else {
            this.$message.error(res.data.message)

          }
      },
      //删除轮播图
      async delBanner(id){
        const params = {
          id:id,
        }
        //删除
        const judge= this.$confirm('删除该banner?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          let res = await this.$api.delBanner(params)
          if(res.data.level=='success'){
            if(this.bannerList.length==1&&this.page>1){
              this.page--;
            }
            this.reqBannerList();
            this.$message({
              type: 'success',
              message: res.data.message
            });
          }else{
            this.$message({
              type: 'error',
              message: res.data.message
            });
          }
        }).catch(() => {
        });
      },
      async getUserInfo() {
        const res = await this.$api.getMerchantUserInfo();
        if (res.data.level == 'success') {
          this.merchant = res.data.data
          this.reqBannerList();
        } else {
          this.$message({
            message: res.data.message,
            type: 'error'
          });
        }
      },

      //下拉框选择事件
      merchantSelectClear() {
        this.page = 1
        this.reqBannerList()
      },

      merchantChange() {
        this.page = 1
        this.reqBannerList()
      }

    }
  }
</script>
<style lang='scss' scoped>
  .banner{
    padding: 10px 30px;
    .action-bar{
      background-color: #f2f2f2;
      height: 60px;
      margin: 10px 0px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      padding-left: 20px;
      .action-bar-input{
        width: 250px;
        margin-right: 14px;
      }
    }
    .el-table-style{
      width: 100%;
      border: 1px solid #f2f2f2;
    }
    .footer-bar{
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #f2f2f2;
      padding: 8px;
      margin: 10px 0px;
      box-sizing: border-box;
    }
    .dialog-footer{
      text-align: center;
    }
  }
</style>

<style>
  .el-pagination.is-background .el-pager li,
  .el-pagination.is-background .btn-prev,
  .el-pagination.is-background .btn-next
  {
    background-color: #fff;
    border: 1px solid #f1f1f1;
    margin: 0;
  }
  .member .el-dialog__body{overflow: auto;}
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
</style>
<style scoped>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 300px;
    height: 108px;
    line-height: 128px;
    text-align: center;
  }
  .avatar {
    width: 300px;
    height: auto;
    display: block;
  }
</style>
